<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide"  id="permissionTable" lay-filter="permissionTable"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser">添加菜单</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script  src="../../../layui/layui.js" ></script>
<script src="../../../layui/layui.all.js"  ></script>
<script src="../../../js/jquery.min.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    /*使用模块加载的方式 加载文件*/
    layui.config({
        base: '../../../layui/'
    }).extend({
        treetable: 'treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        var form = layui.form;
        // 渲染表格
        var renderTable = function () {//树桩表格参考文档：https://gitee.com/whvse/treetable-lay
            layer.load(2);
            treetable.render({
                treeColIndex: 1,//树形图标显示在第几列
                treeSpid: 0,//最上级的父级id
                treeIdName: 'id',//id字段的名称
                treePidName: 'pid',//pid字段的名称
                treeDefaultClose: false,//是否默认折叠
                treeLinkage: true,//父级展开时是否自动展开所有子级
                elem: '#permissionTable',
                url: '/sysPer/treeList',
                toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                page: false,
                cols: [[
                    {field: 'id', title: '编号'},
                    {field: 'name', title: '资源名称'},
                    {field: 'url',edit: 'text', title: '资源路径'},
                    {field: 'permission', edit: 'text',title: '权限字段'},
                    {field: 'type', title: '类型',
                        templet: function(d){
                            if(d.type==1){
                                return '按钮';
                            }else{
                                return '菜单';
                            }
                        }
                    },
                    {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();


        //头工具栏事件
        table.on('toolbar(permissionTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addUser':
                    layer.open({
                        type: 2,
                        shadeClose: false,
                        shade: 0.8,
                        area: ['30%', '75%'],
                        content: '/views/system/permission/permissionAdd.html' //iframe的url
                    });
                    break;
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(permissionTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('删除该菜单？', function(index){
                    $.ajax({
                        type: 'DELETE',
                        url: '/sysPer/delPermission',
                        data: {"perId" :data.id},
                        success: function(data){
                            if(data.code == 1){
                                layer.msg('操作成功！');
                                layer.close(index);
                                setTimeout(function(){
                                    location.reload();
                                },1000 );
                            }else{
                                layer.msg('数据异常，操作失败！');
                            }},

                    });
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    shadeClose: false,
                    shade: 0.8,
                    area: ['30%', '75%'],
                    content: '/views/system/permission/permissionEdit.html?perId='+data.id
                });

            }
        });
        //监听单元格编辑
        table.on('edit(permissionTable)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
            tableEdit(data.id,field,value);
        });
        function tableEdit(id,field,value){
            $.ajax({
                type: 'put',
                url: '/sysPer/updateById',
                data:{'perId':id,'fieldName':field,'content':value},
                success: function(data){
                    if(data.code == 1){
                        layer.msg('操作成功！');
                        setTimeout(function(){
                            location.reload();
                        },1000 );
                    }else{
                        layer.msg('数据异常，操作失败！');
                    }},

            });

        }





    });
</script>
<script type="text/html" id="statusTemp">
    {{#  if(d.status==1){ }}
    <input type="checkbox" name="status" lay-skin="switch"   lay-text="开启|关闭"  value= "{{ d.id}}"  lay-filter="status" checked="true" />
    {{#  } else { }}
    <input type="checkbox" name="status" lay-skin="switch"  lay-text="开启|关闭"  value=" {{ d.id}}" lay-filter="status" />
    {{#  } }}
</script>
</body>
</html>